<template>
	<div class="marquee" v-show="showMarqueeBar" @click="$emit('click')">
		<div class="left-tip" v-show="$slots.tips">
			<slot name="tips"></slot>
		</div>
		<div class="wrap" ref="wrap" >
			<div class="content" ref="content" :class="[ animationClass]" :style="contentStyle" @animationend="onAnimationEnd">
				<slot>{{text}}</slot>
			</div>
		</div>
		<div v-if="close" class="right-close" @click="closeMarqueeBar">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
			    <g fill-rule="evenodd">
			        <path
			            d="M.44 2.56A1.5 1.5 0 1 1 2.56.44l27 27a1.5 1.5 0 1 1-2.12 2.12L15 17.123 2.56 29.56A1.5 1.5 0 1 1 .44 27.44L12.878 15 .44 2.56zM27.44.44a1.5 1.5 0 1 1 2.12 2.12l-9 9a1.5 1.5 0 1 1-2.12-2.12l9-9z"
			        ></path>
			    </g>
			</svg>
		</div>
	</div>
</template>

<script>
	export default {
		name: "wioc-marquee",
		data() {
			return {
				showMarqueeBar: true,
				animationClass: "",
				offsetWidth: 0,
				wrapWidth: 0,
				duration: 0,
				firstRound: true
			}
		},
		props: {
			text: String,
			speed: {
				type: Number,
				default: 10
			},
			delay: {
				type: [String, Number],
				default: 1
			},
			scrollable: {
				type: Boolean,
				default: true
			},
			close:{
				type: Boolean,
				default: false
			}
		},
		computed: {
			contentStyle() {
				return {
					paddingLeft: this.firstRound ? 0 : this.wrapWidth + "px",
					animationDelay: (this.firstRound ? 0 : this.delay) + "s",
					animationDuration: this.duration + "s"
				}
			},
			computedStyle() {
				return `background:"red";&::before:{display:"block",content:'222'}`
				
			}
		},
		watch: {
			text: {
				handler() {
					this.$nextTick(() => {
						const {
							wrap,
							content
						} = this.$refs
						if (!wrap || !content) {
							return
						}
						const wrapWidth = wrap.getBoundingClientRect().width
						//获取可视化宽度
						const contentWidth = content.getBoundingClientRect().width
						if (this.scrollable && contentWidth > wrapWidth) {
							this.wrapWidth = wrapWidth;
							this.offsetWidth = contentWidth;
							this.duration = (contentWidth / wrapWidth) * this.speed;
							this.animationClass = "play";
						}
					})
				},
				immediate: true
			}
		},
		methods: {
			onAnimationEnd() {
				this.firstRound = false;
				this.$nextTick(() => {
					this.duration =
						((this.offsetWidth + this.wrapWidth) / 375) * this.speed;
					this.animationClass = "play-infinite";
				});
			},
			closeMarqueeBar(){
				this.showMarqueeBar = !this.showMarqueeBar
			}
		},
		created(){
			
		}

	}
</script>

<style lang="less" scoped>
	.marquee {
		display: flex;
		padding-left:0.1rem;
		background: rgba(254, 250, 216,0.95);
		color:#d37d42;
		height: 0.27rem;
		line-height: 0.27rem;
		font-size: 0.093869rem;
        padding: 0 0.1rem;
		.left-tip{
			padding-right: 0.1rem;
		}
		.wrap {
			flex: 1;
			position: relative;
			overflow: hidden;
			height:0.27rem;
			.content {
				position: absolute;
				white-space: nowrap;
			}
		}

		.play {
			animation: van-notic-bar-play linear both running;
		}

		.play-infinite {
			animation: van-notice-bar-play-infinite linear infinite both running;
		}
		.right-close{
			padding-left: 0.1rem;
			svg {
			  vertical-align: baseline;
			  width: 0.102403rem;
			  height:  0.102403rem;
			  fill: #969393;
			}
		}

	}

	@keyframes van-notic-bar-play {
		from{
			left:0%;
		}
		to {
			left:-100%;
		}
	}

	@keyframes van-notice-bar-play-infinite {
		from {
			left:0%;			
		}
		to {
			left:-100%;
			
		}
	}
</style>
